<template>
  <div class="basic-info-container scroll-box">
    <ul class="basic-info-list">
      <li>
        <span class="item-left">用户姓名</span>
        <div class="item-right">{{ name }}</div>
      </li>
      <li>
        <span class="item-left">工号</span>
        <div class="item-right">{{ workerNumber }}</div>
      </li>
      <li>
        <span class="item-left">职位</span>
        <div class="item-right">{{ positionName }}</div>
      </li>
      <li>
        <span class="item-left">角色</span>
        <div class="item-right">{{ roleName }}</div>
      </li>
      <li>
        <span class="item-left">所属部门</span>
        <div class="item-right">{{ departmentName }}</div>
      </li>
      <li>
        <span class="item-left">所属公司</span>
        <div class="item-right">{{ customerName }}</div>
      </li>
      <li>
        <span class="item-left">登录密码</span>
        <div
          class="item-right"
          @click="jumpView('editPassword')"
        >
          修改
          <van-icon name="arrow" />
        </div>
      </li>
      <li>
        <span class="item-left">联系电话</span>
        <div
          class="item-right"
          @click="jumpView('editPhone', telephone)"
        >
          {{ telephone }}
          <van-icon name="arrow" />
        </div>
      </li>
      <li>
        <span class="item-left">电子邮箱</span>
        <div
          class="item-right item-content"
          @click="jumpView('editEmail')"
        >
          <span>{{ email || '未设置'}}</span>
          <van-icon name="arrow" />
        </div>
      </li>
    </ul>

    <div
      class="exit-btn"
      @click="exitFn"
    >退出登录</div>
  </div>
</template>

<script>
import { Dialog } from 'vant';
import { getUserByToken } from '@/api/user.js';

export default {
  name: 'UserBasicInfo',
  data() {
    return {
      name: '',
      workerNumber: '',
      positionName: '',
      roleName: '',
      departmentName: '',
      customerName: '',
      password: '',
      telephone: '',
      email: ''
    };
  },
  created() {
    this.getUserInfo();
  },
  methods: {
    getUserInfo() {
      getUserByToken().then(res => {
        let {
          name,
          worker_number,
          position_name,
          role_name,
          department_name,
          customer_name,
          password,
          telephone,
          email
        } = res.data;
        this.name = name;
        this.workerNumber = worker_number;
        this.positionName = position_name;
        this.roleName = role_name;
        this.departmentName = department_name;
        this.customerName = customer_name;
        this.password = password;
        this.telephone = telephone;
        this.email = email;
      });
    },
    jumpView(name, params) {
      if (params) {
        this.$router.push({
          name,
          query: {
            phone: params
          }
        });
      } else {
        this.$router.push({
          name
        });
      }
    },
    exitFn() {
      Dialog.confirm({
        title: '提示',
        message: '是否退出应用？',
        confirmButtonText: '是',
        confirmButtonColor: '#3378FF',
        cancelButtonText: '否'
      })
        .then(() => {
          localStorage.removeItem('token');
          localStorage.removeItem('realTimeSelectData');
          localStorage.removeItem('conditionData');
          localStorage.removeItem('dataAnalyseCondition');
          localStorage.removeItem('customerIdForApp');

          this.$router.push({
            name: 'login'
          });
        })
        .catch(() => {});
    }
  }
};
</script>

<style lang="scss" scoped>
.basic-info-container {
  width: 100%;
  height: 100%;

  .basic-info-list {
    width: 100%;
    padding: 0 0.426667rem;
    background-color: #fff;

    li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      padding: 0.32rem 0;
      font-size: 0.373333rem;
      border-bottom: 1px solid var(--border-color);
      overflow: hidden;

      &:last-of-type {
        border-bottom: 0;
      }

      .item-left {
        flex-shrink: 0;
        margin-right: 0.533333rem;
      }

      .item-right {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        color: var(--color-deep-gray);

        &.item-content {
          flex: 1;
          width: 0;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }

        span {
          width: 93%;
          text-align: right;
          word-wrap: break-word;
        }

        .van-icon {
          flex-shrink: 0;
          margin-left: 0.106667rem;
          color: #ccc;
        }
      }
    }
  }

  .exit-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 1.226667rem;
    margin-top: 0.32rem;
    color: #f56c6c;
    font-size: 0.373333rem;
    background-color: #fff;
  }
}
</style>